<template>
    <div class="dialog-container">
        <el-dialog :visible.sync="dialogTableVisible" width="80%">
            <template>
                <el-row
                    type="flex"
                    justify="space-between"
                    slot="title"
                    class="title-container"
                    shadow="never"
                >
                    <span>
                        待结算佣金明细
                    </span>
                    <span>
                        社区店名称：
                    </span>
                    <span>
                        团长：
                    </span>
                </el-row>
            </template>
            <el-card class="filter-container" shadow="never">
                <div>
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span>团长明细</span>
                    </el-row>
                    <el-row style="margin-top:12px;">
                        <el-input
                            style="width:400px;"
                            clearable
                            size="small"
                            placeholder="团长名称／社区店／名字／手机号码"
                            suffix-icon="el-icon-search"
                            v-model="nameSearchInput"
                        >
                        </el-input>
                        <el-date-picker
                            v-model="rangePicker"
                            style="margin-left: 10px;"
                            size="small"
                            align="right"
                            type="range"
                            placeholder="区间"
                        >
                        </el-date-picker>
                        <el-button
                            style="margin-left: 10px;"
                            @click="handleSearchCaptainList()"
                            type="primary"
                            size="small"
                        >
                            查询
                        </el-button>
                        <el-button @click="handleResetCaptainSearch()" size="small">
                            重置
                        </el-button>
                    </el-row>
                </div>
            </el-card>
            <div class="table-container">
                <!-- <el-table
                    ref="captainListTable"
                    :data="captainDataList"
                    style="width: 100%"
                    v-loading="listLoading"
                    border
                >
                    <el-table-column label="团长信息" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                    <el-table-column label="社区店名称" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                    <el-table-column label="待结算利润" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                    <el-table-column label="账户余额" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                    <el-table-column label="佣金总额" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                    <el-table-column label="最近提现时间" align="center">
                        <template slot-scope="scope">{{ scope.row.socialName }}</template>
                    </el-table-column>
                </el-table> -->
            </div>
            <div class="pagination-container">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[5, 10, 15]"
                    :current-page.sync="listQuery.pageNum"
                    :total="total"
                >
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
    publishStatus: null,
    verifyStatus: null,
    productSn: null,
    productCategoryId: null,
    brandId: null
};
export default {
    name: 'productList',
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dialogTableVisible: false,
            nameSearchInput: '',
            rangePicker: [null, null],
            captainDataList: [],
            listLoading: false,
            listQuery: Object.assign({}, defaultListQuery),
            total: null,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            }
        };
    },
    created() {},
    watch: {},
    filters: {},
    methods: {
        getCaptainList() {},
        handleSearchCaptainList() {},
        handleResetCaptainSearch() {},
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getCaptainList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getCaptainList();
        },
        handleEditCaptain() {},
        handleBackCaptain() {},
        handleViewCaptainOrders() {}
    }
};
</script>
<style lang="scss" scoped>
.app-container .title-container {
    margin-bottom: 20px;
}

.avatar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    p {
        text-align: center;
        margin-top: 0;
        &:nth-child(2) {
            color: #f56c6c;
        }
    }
}
</style>
